<template>
    <div>
      <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <el-button type="primary" size="default" @click="add(0)">新增</el-button>
          
        </div>
        <el-table :data="list" border stripe>
          <el-table-column 
            prop="addressName"
            label="地址名称"
            >
          </el-table-column>
          <el-table-column 
            prop="detailAddress"
            label="默认发货地址"
            >
            <template v-slot="scope">
              默认发货地址:<el-switch v-model="scope.row.sendStatus" :active-value="true" 
              :inactive-value="false" 
              @change="uptStatus(scope.row.id)">
              </el-switch>
              
            </template>
          </el-table-column>
          <el-table-column 
            prop="name"
            label="收货人姓名"
            >
          </el-table-column>
          <el-table-column 
            prop="phone"
            label="收货人电话"
            >
          </el-table-column>
          <el-table-column 
            prop="phone"
            label="操作"
            >
            <template v-slot="scope">
              <el-button type="primary" size="default" @click="edit(scope.row,1)">编辑</el-button>
              
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
     
      <el-dialog
        title="地址详情"
        @close="reset"
        :visible.sync="dialogVisible"
        width="70%"
       >
        <el-form :model="form" :rules="rules" ref="form" label-width="120px"  size="mini">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="地址名称" prop="addressName">
                <el-input v-model="form.addressName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="收货人姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="收货人手机号">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="邮政编码">
                <el-input v-model="form.postCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="收货地址">
                <el-cascader
                  size="mini"
                  :options="regionData"
                  @change="selectAddress"
                  v-model="address">
                </el-cascader>
                <!-- <el-input v-model="form.address"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="详细地址">
                <el-input v-model="form.detailAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-form>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="addAddress">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import {
  addressList,
  setSendOne,
  save,
  update
} from "@/api/orderManage/address"
import { regionData,codeToText } from 'element-china-area-data'
export default {
    data() {
        return {
          list:[],
          address:"",
          regionData,
          dialogVisible:false,
          form:{
            "addressName": "",
            "city": "",
            "cityCode": "",
            "createTime": "",
            "detailAddress": "",
            "id": "",
            "modifyTime": "",
            "name": "",
            "phone": "",
            "postCode": "",
            "province": "",
            "receiveStatus": "",
            "region": "",
            "sendStatus": ""
          },
          status:"",
          rules: {
            addressName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
        };
    },
    computed: {

    },
    created() {
     this.init()
    },
    mounted() {

    },
    methods: {
      resetForm(){
        console.log("表单重置")
        this.$refs.form.resetFields();
      },
      reset(){
        this.form = {
            "addressName": "",
            "city": "",
            "cityCode": "",
            "createTime": "",
            "detailAddress": "",
            "id": "",
            "modifyTime": "",
            "name": "",
            "phone": "",
            "postCode": "",
            "province": "",
            "receiveStatus": "",
            "region": "",
            "sendStatus": ""
          }
        this.address = ""
      },
      edit(val,status){
        this.status = status
        this.dialogVisible = !this.dialogVisible;
        this.form = val;
        this.address = val.cityCode.split(",")
      },
      selectAddress(val){
        console.log(codeToText[val[0]]);
        console.log(codeToText[val[1]]);
        console.log(codeToText[val[2]]);
        this.form.cityCode = val.join(",");
        this.form.province =  codeToText[val[0]];
        this.form.city =  codeToText[val[1]];
        this.form.region =  codeToText[val[2]];
      },
      addAddress(){
        var newData = JSON.parse(JSON.stringify(this.form));
        newData.sendStatus = newData.sendStatus ?1 :0
        if(this.status){
          // 编辑
          update(newData)
          .then(res=>{
            this.dialogVisible = !this.dialogVisible;
            this.init()
          })
          return
        }
        save(newData)
        .then(res=>{
          this.dialogVisible = !this.dialogVisible;
          this.init()
        })
      },
      add(status){
        this.status = status
        this.dialogVisible = !this.dialogVisible
      },
      init(){
        addressList()
        .then(res =>{
          console.log(res);
          res.data.items.forEach(ele =>{
            ele.sendStatus = ele.sendStatus ? true : false
          })
          this.list = res.data.items;
        })
      },
      uptStatus(id){
        setSendOne({
          id
        })
        .then(res =>{
          console.log(res);
          this.init()
        })
      }
    },
};
</script>

<style scoped lang="scss">

</style>
